<template>
  <div class="container">
    <n-back-top />

    <n-page-header title="最新话题">
      <template #extra v-if="userStore.role === 1">
        <n-button @click="createTopic">创建话题</n-button>
      </template>
    </n-page-header>
    <div class="topic-list">
      <n-list>
        <n-list-item v-for="(item, index) in topicList" :key="index" :ref="setItemRef">
          <div class="topic-item" @click="detail(item.id)">
            <n-thing>
              <template #header>
                <n-h4 prefix="bar" style="margin: 0">{{item.title}}</n-h4>
              </template>
              <template #description>
                <n-p depth="3">{{item.content}}</n-p>
              </template>
              <template #footer>
                <n-p depth="3">{{item.date}}</n-p>
              </template>
            </n-thing>
          </div>
        </n-list-item>
      </n-list>
    </div>
    <div class="loading" v-if="requesting">
      <n-spin :size="18" />
    </div>
    <div class="no-more" v-if="noMore">
      <n-p depth="3">已经没有更多了</n-p>
    </div>
  </div>
</template>

<script setup>

import {useRouter} from "vue-router";
import {useRequests} from "@/common/requests.js";
import {useMessage, useNotification} from "naive-ui";
import {ref, nextTick} from "vue";
import {useUserStore} from "@/stores/user.js";
import {useIntersectionObserver} from "@vueuse/core";

const router = useRouter()
const requests = useRequests()
const message = useMessage()
const notify = useNotification()
const userStore = useUserStore()

const noMore = ref(false)
const requesting = ref(false)
const topicList = ref([])
const topicItemRef = ref([])
const setItemRef = el => {
  topicItemRef.value.push(el)
}

const page = ref({
  page: 0,
  offset: 20
})

const fetch = refresh => {
  if (requesting.value) {
    return false
  }

  requesting.value = true
  if (refresh) {
    topicItemRef.value = []
    noMore.value = false
    page.value.page = 0
  }

  page.value.page ++
  requests.topic.list(page.value).then(resp => {
    requesting.value = false
    if (resp.ret === 0) {
      if (refresh) {
        topicList.value = resp.data
      } else {
        topicList.value.push(...resp.data)
      }

      if (resp.data.length < page.value.offset) {
        noMore.value = true
      } else {
        nextTick(() => {
          const item = topicItemRef.value[topicItemRef.value.length - 2]
          const { stop } = useIntersectionObserver(item, ([{ isIntersecting }]) => {
            if (isIntersecting) {
              stop()
              fetchTopicList()
            }
          })
        })
      }
    } else {
      message.error(resp?.data ?? resp?.msg ?? '未知错误')
    }
  }).catch(err => {
    requesting.value = false

    console.log(err)
    notify.error({content: '出错了', meta: err.toString(), duration: 1500})
  })
}

const createTopic = () => {
  router.push({name: 'TopicCreateView'})
}

const detail = id => {
  router.push({name: 'TopicDetailView', params: {id}})
}

fetch()
</script>

<style lang="scss" scoped>
.container {
  .topic-list {
    margin-top: 2rem;

    .topic-item {
      cursor: pointer;
    }
  }

  .loading {
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .no-more {
    display: flex;
    justify-content: center;
    align-items: center;
  }
}
</style>
